<template>
  <div id="guide">
    <div class="header">
      <!-- 页头 -->
      <no-data></no-data>
      <div class="header-join">
        <h1 class="h-h1">多了解TA们</h1>
        <h1>更好地和TA们相处</h1>
        <h2>无条件的爱，是相互的，多给彼此一些耐心</h2>
      </div>
    </div>

    <!-- 寄养指南 -->
    <aside>
      <h1>
        <div :class="`guidef ${sele1}`" @click="bg1">
          寄养家庭指南<span>FOSTER FAMILYGUIDE</span
          ><strong :style="`display: ${q}`"></strong>
        </div>
        <div :class="`guide ${sele2}`" @click="bg2">
          寄养指南<span>FOSTER GUIDE</span
          ><strong :style="`display: ${w}`"></strong>
        </div>
      </h1>
    </aside>

    <section>
      <div class="guidef-content" :style="`display: ${q}`">
        <h1>认真做好寄养这件事，杜绝任何意外的发生</h1>
        <h2>
          如碰到宠物品种体重情况特殊，请参考<a href="javascript:void(0);"
            >宠物体重规格
          </a>
        </h2>
        <div class="float_window">
          <h1>宠物体重规格</h1>
          <ul>
            <li>
              <img
                src="http://viptail.image.alimmdn.com/files/official_web/img/chaoxiaoxin.png"
                alt=""
              />
              <h5>超小型犬体重</h5>
              <div>&lt;4kg</div>
            </li>
            <li>
              <img
                src="http://viptail.image.alimmdn.com/files/official_web/img/xiaoxin.png"
                alt=""
              />
              <h5>小型犬体重</h5>
              <div>&lt;10kg</div>
            </li>
            <br />
            <li>
              <img
                src="http://viptail.image.alimmdn.com/files/official_web/img/zhongxin.png"
                alt=""
              />
              <h5>中型犬体重</h5>
              <div>11kg-30kg</div>
            </li>
            <li>
              <img
                src="http://viptail.image.alimmdn.com/files/official_web/img/daxing.png"
                alt=""
              />
              <h5>大型犬体重</h5>
              <div>30kg-40kg</div>
            </li>
            <li>
              <img
                src="http://viptail.image.alimmdn.com/files/official_web/img/chaodaxin.png"
                alt=""
              />
              <h5>超大型犬体重</h5>
              <div>&gt;41kg</div>
            </li>
          </ul>
        </div>
        <ul class="ul-content">
          <li class="first-li">
            <a
              target="_blank"
              href="http://www.viptail.epet.com/share/long_article.html?id=284872"
            >
              <aside>最近更新</aside>
              <span>房间准备好，毛孩子的安全第一</span>
              <div>
                来自：等待毛孩子入住前的准备 <strong>2017-09-09</strong>
              </div>
            </a>
          </li>
          <li>
            <img
              src="http://viptail.image.alimmdn.com/files/official_web/img/guide_pic_1.png"
            />
            <div class="float-right">
              <h3>正式成为寄养家庭之路</h3>
              <br />
              <br />
              <a
                target="_blank"
                href="http://www.viptail.epet.com/share/long_article.html?id=204992"
                >《园长秘笈|寄养家庭拍照指南》</a
              >
              <br />
              <a
                target="_blank"
                href="http://www.viptail.epet.com/share/long_article.html?id=238714"
                >《叮~您有一个新的寄养订单，请点击查看》</a
              >
            </div>
          </li>
          <li>
            <img
              src="http://viptail.image.alimmdn.com/files/official_web/img/guide_pic_2.png"
              class="big-img"
            />
            <div class="float-left">
              <h3>等待毛孩子入住前的准备</h3>
              <br />
              <br />
              <a
                target="_blank"
                href="http://www.viptail.epet.com/share/long_article.html?id=284872"
                >《为了毛孩的安全，你应该做好这一步》</a
              >
            </div>
          </li>
          <li>
            <img
              src="http://viptail.image.alimmdn.com/files/official_web/img/guide_pic_3.png"
            />
            <div class="float-right">
              <h3>完成一段完美的接待毛孩子之旅</h3>
              <a
                target="_blank"
                href="http://www.viptail.epet.com/share/long_article.html?id=206836"
                >《初次见面，如何快速取得毛孩子的欢心？》</a
              >
              <br />
              <a
                target="_blank"
                href="http://www.viptail.epet.com/share/long_article.html?id=281197"
                >《邀请评价、分享以及保障的重要性》</a
              >
              <br />
              <a
                target="_blank"
                href="http://www.viptail.epet.com/share/long_article.html?id=284890"
                >《寄养时可能会遇到的8大难题》</a
              >
            </div>
          </li>
          <li>
            <img
              src="http://viptail.image.alimmdn.com/files/official_web/img/guide_pic_4.png"
              class="big-img"
            />
            <div class="float-left">
              <h3>平台规则请牢记</h3>
              <br />
              <br />
              <a
                target="_blank"
                href="http://www.viptail.epet.com/share/long_article.html?id=205786"
                >《虚假交易处罚规则》</a
              >
              <br />
              <a
                target="_blank"
                href="http://www.viptail.epet.com/share/long_article.html?id=205789"
                >《重要！寄养家庭下架处罚规则》</a
              >
            </div>
          </li>
        </ul>
      </div>
      <div class="guide-content" hidden="" :style="`display: ${w}`">
        <h1>寄养前仔细阅读，为毛孩子挑选中意的家庭</h1>
        <h2>
          遇到任何想要了解的问题都可以给你们亲爱的园长留言或者联系在线客服
        </h2>
        <ul class="ul-content">
          <li>
            <img
              src="http://viptail.image.alimmdn.com/files/official_web/img/guide_pic_5.png"
            />
            <div class="float-right">
              <h3>挑选合适的家庭以及预定</h3>
              <h5>划重点！寄养前必须了解的【最重要的事】</h5>
              <a
                target="_blank"
                href="http://www.viptail.epet.com/share/long_article.html?id=278841"
                >《选择合适的寄养家庭真的很有必要》</a
              >
            </div>
          </li>
        </ul>
      </div>
    </section>
    <!-- 页尾 -->
    <my-footer></my-footer>
  </div>
</template>

<script>
import MyFooter from "../components/MyFooter.vue";
import NoData from "../components/NoData.vue";
export default {
  components: { NoData, MyFooter },
  data() {
    return {
      q: "block",
      w: "none",
      sele1: "select",
      sele2: "",
    };
  },
  methods: {
    bg1() {
      this.q = "block";
      this.w = "none";
      this.sele1 = "select";
      this.sele2 = "";
    },
    bg2() {
      this.q = "none";
      this.w = "block";
      this.sele2 = "select";
      this.sele1 = "";
    },
  },
};
</script>

<style lang="scss">
#guide {
  section {
    .ul-content {
       li {
        margin-bottom: 60px;
        position: relative;
      }
      display: block;
      list-style-type: disc;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0px;
      margin-inline-end: 0px;
      padding-inline-start: 40px;
    }
    .float_window {
      ul {
        li {
          div {
            color: #f2b02b;
            background: #000;
            margin: 0.2em 1.5em;
            border-radius: 5px;
            font-size: 12px;
            padding: 0.3em 0;
          }
          img {
            width: 50%;
          }
          display: inline-block;
          text-align: center;
          width: 30%;
          margin-top: 10px;
        }
        text-align: center;
      }
      h1 {
        text-align: center;
        font-size: 16px;
        font-weight: 900;
      }
      background: #fff;
      padding-top: 1em;
      border-radius: 5 x;
      width: 400px;
      height: 260px;
      border: 1px solid #ccc;
      position: absolute;
      left: 43%;
      top: 700px;
      display: none;
    }
    h2:hover + .float_window {
      display: block;
    }
    h2 {
      a {
        color: #fbc02d;
      }
      font-size: 18px;
      font-weight: 400;
      color: #5d5d5d;
      margin: 5px 0 30px;
    }
    // background: #fff;
    position: static;
    width: 1200px;
    margin: 0 auto;
    padding: 30px 5px;
    h1 {
      font-size: 25px;
      font-weight: 500;
      color: #282828;
    }
  }
  aside {
    background: #333;
    color: #fbc02d;
    padding: 20px 0 0;
    h1 {
      width: 1200px;
      margin: 0 auto;
      .guide strong {
        left: 40px;
      }
      .select {
        color: #fbc02d;
        border-bottom: 9px solid #fbc02d;
      }
      div {
        font-size: 28px;
        width: auto;
        display: inline-block;
        text-align: center;
        margin-right: 100px;
        position: relative;
        padding: 0 10px 23px;
        span {
          font-size: 15px;
          display: block;
          text-align: center;
        }
        strong {
          position: absolute;
          left: 40%;
          bottom: -40px;
          border-top: 16px solid #fbc02d;
          border-right: 16px solid #fff;
          border-bottom: 16px solid #fff;
          border-left: 16px solid #fff;
        }
      }
    }
  }
  aside h1 div:hover {
    cursor: pointer;
  }
  .header {
    h2 {
      font-size: 20px;
      color: #fff;
      width: 1200px;
      margin: 20px auto;
    }
    h1 {
      text-align: justify;
      font-weight: normal;
      font-size: 35px;
      color: #fff;
      width: 1200px;
      margin: 0 auto;
      line-height: 1.3;
    }
    .h-h1 {
      margin-top: -320px;
    }
    background: url("../assets/imgs/guide_jiyangzhinan_top.jpg") center top
      no-repeat;
    height: 560px;
  }
}
</style>